<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    :width="size"
    :height="size"
    :fill="fill"
    :stroke="stroke"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    class="therapy-icon"
  >
    <!-- 人物头像轮廓 -->
    <circle cx="9" cy="7" r="4" />
    <path d="M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2" />

    <!-- 治疗师/心理医生代表 -->
    <circle cx="18" cy="4" r="2" />
    <path d="M18 6v2" />
    <path d="M17 9h2" />

    <!-- 连接线/治疗关系 -->
    <path d="M13 8l3-3" />

    <!-- 心理健康象征 -->
    <path d="M21 16c-.8-2.4-2.9-4-5.5-4-.8 0-1.6.2-2.3.5" />
    <path d="M21 16c0 0-1.3 2-2.5 2-1.3 0-1.9-2-3-2s-1.7 2-3 2c-1.2 0-2.5-2-2.5-2" />
  </svg>
</template>

<script setup>
defineProps({
  size: {
    type: [Number, String],
    default: 24,
  },
  fill: {
    type: String,
    default: 'none',
  },
  stroke: {
    type: String,
    default: 'currentColor',
  },
})
</script>

<style scoped>
.therapy-icon {
  transition: all 0.3s ease;
}
.therapy-icon:hover {
  transform: scale(1.05);
}
</style>
